<template>
  <div style="display: flex">
    <div class="wxb-upload">
      <!--无图-->
      <div v-if="!value" @click="showPhoto = true" class="image-box" :style="{ width: w, height: h }">
        <i class="el-icon-plus plus" :style="{ lineHeight: h }"></i>
      </div>
      <!--有图-->
      <div v-if="value" @click="showPhoto = true" class="image-box have-image" :style="{ width: w, height: h }">
        <el-image :style="{ width: w, height: h }" :src="value" fit="fill"></el-image>
        <i class="el-icon-error close" @click.stop="clearphoto"></i>
      </div>
      <!--弹出相册-->
    </div>
    <photos @select="getPhoto" :show-photo="showPhoto" v-model="showPhoto"></photos>
  </div>
</template>

<script>
import Photos from "./Photos";

export default {
  name: "UploadOne",
  components: { Photos },
  props: {
    w: { default: "100px" },
    h: { default: "100px" },
    value: { default: "" },
  },
  data() {
    return {
      showPhoto: false,
    };
  },
  methods: {
    getPhoto(photo) {
      this.$emit("input", photo);
    },
    clearphoto() {
      this.$emit("input", "");
    },
  },
};
</script>

<style>
.wxb-upload {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 20px;
  vertical-align: middle;
  text-align: center;
  position: relative;
  float: left;
  margin-top: 10px;
}

.wxb-upload .image-box .plus {
  font-size: 28px;
  color: #8c939d;
  text-align: center;
}

.wxb-upload .image-box .close {
  font-size: 20px;
  position: absolute;
  top: -10px;
  right: -10px;
  display: none;
  color: var(--main-color);
}

.wxb-upload:hover {
  border: 1px dashed var(--main-color);
}

.wxb-upload:hover .have-image .close {
  display: block;
}

.wxb-upload:hover .image-box .plus {
  color: var(--main-color);
}
</style>
